﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>复利计算器</title>
    <link href="../assets/materialize-v0.97.5/css/materialize.min.css" rel="stylesheet" />
    <style>
        table {
            width: 100%;
        }

        td {
            border-bottom: 1px solid gray;
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <h1>复利计算器</h1>
        </div>
    </header>
    <div class="container">
        <div class="row">
            <div class="col l3">
                <div>
                    <div class="input-field">
                        <input placeholder="输入本金" id="editCapital" type="text" oninput="onEditCapitalInput(this)" />
                        <label id="editCaptialLabel" for="editCapital">本金（元）</label>
                    </div>
                    <div class="input-field">
                        <input placeholder="输入利率" id="editRate" type="text">
                        <label for="editRate">利率（%）</label>
                    </div>
                    <div class="input-field">
                        <input id="editRound" type="text" />
                        <label for="editRound">复利次数</label>
                    </div>
                    <div class="input-field">
                        <label for="editAppend">追加（元）</label>
                        <input id="editAppend" type="text" />
                    </div>
                    <button class="btn" id="btnCalc">计算</button>
                    <p>
                        复利一次：获得利息之后，将利息继续存于本金中。
                    </p>
                    <p>
                        追加：每次复利利息转本金时额外存入的本金数。
                    </p>
                </div>
            </div>
            <div class="col l9">
                <div class="input-field">
                    <span>最终结果</span>
                    <span class="red-text " id="editTotal"></span>
                    <span id="textTotal"></span>
                </div>
                <div id="output">

                </div>
            </div>
        </div>
    </div>
    <script src="../assets/jquery/jquery-2.1.1.min.js"></script>
    <script src="../assets/materialize-v0.97.5/js/materialize.min.js"></script>
    <script src="../assets/com/js/daima8.js"></script>
    <script>
        $(document).ready(function () {
            $('#btnCalc').click(function () {
                calculating();
            });

            $('#editCapital').on('input', function () {
                onEditCapitalInput();
            });
        });

        function onEditCapitalInput(obj) {
            var capital = mathUtil.convertFloat($('#editCapital').val());
            if (capital > 0) {
                $('#editCaptialLabel').html('本金（元）' + showTextNumber(capital));
            } else {
                $('#editCaptialLabel').html('本金（元）');
            }
        }

        function calculating() {
            var capital = mathUtil.convertFloat($('#editCapital').val());
            var rate = mathUtil.convertFloat($('#editRate').val()) / 100;
            var count = mathUtil.convertFloat($('#editRound').val());
            var append = mathUtil.convertFloat($('#editAppend').val());

            var html = '<table>';
            for (var i = 0; i < count; i++) {
                var gain = capital * rate;
                var originalCapital = capital;
                capital = capital + parseFloat(gain.toFixed(2)) + append;
                html += '<tr><td>第' + (i + 1) + '次</td><td>' + capital.toFixed(2) + '</td><td>' + originalCapital.toFixed(2) + '(+' + (gain).toFixed(2) + ')</td></tr>';
            }
            $('#output').html(html);
            $('#editTotal').html(capital.toFixed(2));
            $('#textTotal').html('(' + showTextNumber(capital) + ')');
        }

        function showTextNumber(number) {
            return parseInt(number / 10000) + '万';
        }
    </script>
</body>
</html>